<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub":class="index==active?'text-theme cur':''" v-for="(item,index) in menu" :key="index" @tap="changeTab" :data-id="index">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<view class="cu-card">
			<view class="cu-item padding bg-img shadow-blur bg-gradual-theme">
				<view class="flex" style="align-items: center;">
					<view class="cu-avatar round lg" v-if="userInfo.face" :style="'background-image:url('+userInfo.face+');'"></view>
					<view class="text-cut" style="margin-left: 20px;">{{userInfo.nickname}}</view>
				</view>
				<view class="content margin-top-sm">
					<view class="flex text-center text-white shadow-warp" style="padding: 20upx 0;background: rgba(255,255,255,0.4);;">
					  <view class="flex flex-sub flex-direction solid-right" bindtap='toPraise'>
					    <view class="text-xxl text-orange">{{teamCount.count}}</view>
					    <view class="text-black">
					      <text class="cuIcon-attentionfill"></text>
						  <text class="text-sm">累计总人数</text>
						</view>
					  </view>
					  <view class="flex flex-sub flex-direction solid-right" bindtap='toAttention'>
					    <view class="text-xxl text-blue">{{teamCount.monthcount}}</view>
					    <view class="text-black">
					      <text class="cuIcon-favorfill"></text>
						  <text class="text-sm">本月新增人数</text>
						 </view>
					  </view>
					  <view class="flex flex-sub flex-direction" bindtap='toFans'>
					    <view class="text-xxl text-green">{{teamCount.todaycount}}</view>
					    <view class="text-black">
					      <text class="cuIcon-fork"></text>
						  <text class="text-sm">今日新增人数</text>
						</view>
					  </view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white" :class="isFixed?'fixed':''" id="navbar">
			<view class="action">
				<text class="cuIcon-titles text-theme"></text>
				<text class="text-lg text-bold">{{active+'' === '0'?'妲粉':'Call粉'}}列表</text>
			</view>
		</view>
		<scroll-view scroll-y="true">
			<view v-if="!teamList.length" class='empty'  style="height: 100%;">
			   <view style="margin-top: 100upx;text-align: center">
				   <view class="text-cut text-lg margin-top-sm">暂无数据</view>
			   </view>
			</view>
			<view class="cu-list menu-avatar" v-else>
				<view class="cu-item" v-for="(item,index) in teamList" :key="index">
					<view class="cu-avatar round lg" :style="'background-image:url('+item.face+');'"></view>
					<view class="content">
						<view class="text-cut">
							<text class="text-sm">{{item.nickname}}</text>
							<text class="text-sm margin-left-sm">{{item.mobile}}</text>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								{{unixToDate(item.create_time)}}
							</view>
						</view>
					</view>
				</view>
				<view class="loading-text" v-if="finished && teamList.length">{{ loadingText }}</view>
			</view>	
		</scroll-view>
	</view>
</template>

<script>
	import * as Team_API from '../../../api/member/team.js'
	export default {
		data() {
			name:'myTeam'
			return {
				menu:[
					{name:'妲粉'},
					{name:'Call粉'}
				],
				active:0,
				scrollLeft:0,
				params:{
					page_no:1.,
					page_size:20,
					ip:uni.getStorageSync('userInfo').id
				},
				teamList:[],
				fansList:[],
				userInfo:uni.getStorageSync('userInfo'),
				keyword:'',
				currentYear:'',
				currentMonth:'',
				nowYear:'',
				nowMonth:'',
				izDataShow:false,
				date:"",
				teamCount:{},
				finished:false,
				loadingText:'加载完毕',
				navbarInitTop: 0,
				isFixed: false, 
			}
		},
		onPullDownRefresh() {
			setTimeout(()=> {
				uni.stopPullDownRefresh()
				this.finished = false
				this.params.page_no = 1
				this.teamList = []
				this.checkType()
				this.GET_TeamCount()
				this.GET_TeamList()
			}, 200);
		},
		onReachBottom(){
			// console.log('1231',this.params.page_no)
			setTimeout(()=> {
				this.params.page_no +=1
				this.GET_TeamList()
			}, 200);
		},
		onShow() {
			this.GET_TeamCount()
			this.GET_TeamList()
			//获取当前组件到顶部的高度
			if (this.navbarInitTop == 0) {
			  wx.createSelectorQuery().select('#navbar').boundingClientRect((rect) => {
			    if (rect && rect.top > 0) {
			      var navbarInitTop = rect.top;
			      this.navbarInitTop = navbarInitTop
			    }
			  }).exec();
			}    
		},
		onPageScroll(e) {
		    var scrollTop = e.scrollTop;
		    var isSatisfy = scrollTop >= this.navbarInitTop;
			if (this.isFixedTop == isSatisfy) {
			      return false;
			    }else {
			      this.isFixed = isSatisfy
			    }
		},
		methods: {
			GET_TeamList(){
				this.checkType()
				if (!this.finished){
					Team_API.getTeamList(this.params).then(res =>{
						if(res.data.length<1 || !res.data){
							this.finished = true
							this.loadingText = '到底了'
						}else{
							this.teamList = [...this.this.teamList,...res.data]
							this.loadingText = '查看更多'
						}
					})
				}
			},
			GET_TeamCount(){
				this.checkType()
				Team_API.getTeamCount(this.params).then(res =>{
					this.teamCount = res
				})
			},
			changeTab(e){
				this.active = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.params.nickname = '',
				this.keyword = '',
				this.finished = false
				this.params.page_no = 1
				this.teamList = []
				this.GET_TeamList()
				this.GET_TeamCount()
			},
			checkType(){
				if(this.active===1){
					this.params.team_fans = 'F'
				}else{
					this.params.team_fans = 'T'
				}
				
			},
			InputFocus(e){
				// console.log('focus',e)
			},
			InputBlur(e){
				this.params.nickname = e.detail.value
				this.GET_TeamList()
			},
			unixToDate(unix, format) {
			  let _format = format || 'yyyy-MM-dd hh:mm:ss'
			  const d = new Date(unix)
			  const o = {
			    'M+': d.getMonth() + 1,
			    'd+': d.getDate(),
			    'h+': d.getHours(),
			    'm+': d.getMinutes(),
			    's+': d.getSeconds(),
			    'q+': Math.floor((d.getMonth() + 3) / 3),
			    S: d.getMilliseconds()
			  }
			  if (/(y+)/.test(_format)) _format = _format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
			  for (const k in o) if (new RegExp('(' + k + ')').test(_format)) _format = _format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
			  return _format
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../colorui/animation.css";
	image[class*="gif-"] {
		border-radius: 6upx;
		display: block;
	}	
	.team-container{
		margin: 30upx 20upx 10upx;
	}
	.header{
		margin: 0 60upx 20upx;
	}
	/deep/.van-tabs__nav--card {
		border: 1upx solid $color-main;
		border-radius: 20upx;
		overflow: hidden;
	}
	/deep/.van-tabs__nav--card .van-tab.van-tab--active {
		background-color: $color-main;
	}
	/deep/ .van-tabs__nav--card .van-tab {
		color: #333;
		border-right: 1px solid $color-main;
	}
	.empty{
	  width: 100%;
	  height: 85vh;
	  display: flex;
	  justify-content: center;
	  align-cartList: center;
	  color: #666;
	  font-size: 28upx;
	  padding-bottom: 80upx;
	}
	.fixed {
	  position: fixed;
	  z-index: 19999;
	  top:0;
	  width: 100%;
	}
</style>
